<template>
  <view class="bg-white">
    <!-- 状态栏 -->
    <cu-custom bgColor="bg-gradual-green">
      <block slot="content">通知</block>
    </cu-custom>
    <!-- 下拉、上拉组件 -->
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
      :up="upOption"
      :down="downOption"
      :height="scrollHeight"
    >
      <!-- 列表 -->
      <uni-list v-if="hasNotification">
        <notif-item
          v-for="notif in notifications"
          :key="notif.id"
          :notif="notif"
          :unfold="currentPress == notif.id"
          @item-pressed="foldContent(notif.id)"
        >
        </notif-item>
      </uni-list>
      <view v-else class="no-notif text-lg text-bold flex justify-center">
        <text>暂时没有通知哦～</text>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import uniList from '@/components/third_party/uni-list/uni-list.vue';
// 引入mescroll-mixins.js
import MescrollMixin from '@/components/third_party/mescroll-uni/mescroll-mixins.js';
import notifItem from './notif-item.vue';
import { requestNotification } from './request';
import { updateNotification } from './notification';

export default {
    name: 'notification',
    mixins: [MescrollMixin], // 使用mixin
    components: {
        uniList,
        notifItem,
    },
    data() {
        return {
            currentPress: -1,
            notifications: [],
            upOption: {
                use: false,
            },
            downOption: {
                auto: true,
                offset: 65,
                autoShowLoading: true,
                textLoading: '',
                textInOffset: '',
                textOutOffset: '',
                textSuccess: '',
                textErr: '',
            },
        };
    },
    computed: {
        hasNotification: function() {
            return this.notifications.length > 0;
        },
        scrollHeight: function() {
            return this.WindowHeight - this.CustomBar + 'px';
        },
    },
    methods: {
        foldContent: function(index) {
            if (this.currentPress == index) this.currentPress = -1;
            else {
                this.currentPress = index;
            }
        },
        upCallback() {
            //TODO 实现上下加载更多，手动分页（已经有了数据但是不渲染）
            this.mescroll.endSuccess();
        },
        downCallback() {
            const aniDuration = 1000; //动画最短时间(ms)
            let startTime = new Date().getTime();
            requestNotification().then((res) => {
                if (res) {
                    this.notifications = updateNotification(res.data, this.notifications);
                }
                // 保证动画时间
                let elapsed = new Date().getTime() - startTime;
                if (elapsed < aniDuration) {
                    setTimeout(() => {
                        this.mescroll.endSuccess();
                    }, aniDuration - elapsed);
                } else {
                    this.mescroll.endSuccess();
                }
            });
        },
    },
};
</script>

<style>
@import url("@/pages/notification/mescroll-option/mescroll-option.css");

.no-notif {
  padding-top: 120px;
}
</style>
